import { Input, Button, Menu, Icon, Table } from 'antd';
import { WeaTab, WeaTools } from 'ecCom';
const InputGroup = Input.Group;
const SubMenu = Menu.SubMenu;
const { viewer } = WeaTools;


class DemoDetail extends React.Component {
  
  state = {
    selectMenu: 0,
    keyword: "",
    current: '1',
    openKeys: ['sub1'],
    columns: [
      {
        title: '员工姓名',
        dataIndex: 'zhxm',
        key: 'zhxm',
      },
      {
        title: '登录系统',
        dataIndex: 'zhxm',
        key: 'zhxm',
        render: (text, row) => <a onClick={ () => this.openXT(row) }>登录系统</a>,
      },
      {
        title: '登录账号',
        dataIndex: 'dlzh',
        key: 'dlzh',
      },
      {
        title: '登录密码',
        dataIndex: 'pwd',
        key: 'pwd',
      },
      {
        title: '账号有效期',
        dataIndex: 'time',
        key: 'time',
      },
      {
        title: '账号说明',
        dataIndex: 'zhsm',
        key: 'zhsm',
      },
    ],
    columns1: [
      {
        title: '员工姓名',
        dataIndex: 'zhxm',
        key: 'zhxm',
      },
      {
        title: '登录系统',
        dataIndex: 'zhxm',
        key: 'zhxm',
        render: (text, row) => <a onClick={ () => this.openXT(row) }>登录系统</a>,
      },
      {
        title: '登录账号',
        dataIndex: 'dlzh',
        key: 'dlzh',
      },
      {
        title: '登录密码',
        dataIndex: 'pwd',
        key: 'pwd',
      },
      {
        title: '账号说明',
        dataIndex: 'zhsm',
        key: 'zhsm',
      },
    ],
    accountList: [],
    selectedKey: "0",
    selectedKey1: "0",
    topTab: [
      {
        title: "亮点描述",
        viewcondition: "0"
      },
      {
        title: "访问日志",
        viewcondition: "1"
      }
    ],
    topTab1: [
      {
        title: "e-cology9",
        viewcondition: "0"
      },
      {
        title: "e-cology10",
        viewcondition: "1"
      }
    ],
    datas: {
      demoaddress: '',
      xzdz: '',
      demoname: '',
      smwd: [],
      tqm: '',
      ysjb: [],
      jjfa: [],
      doc: []
    },
    ldms: '',
    demoid: '',
    isShowMore: false,
    isShowMoveUp: false,
    accountListE10: [],
    isShowMore1: false,
  }

  openXT (row) {
    const { datas, demoid } = this.state;
    const URL = '/plugin/demoDev/demoCenter/demoCenter_v1.jsp';
    var param = {
      operation: 'log',
      type: 1,
      demoid: demoid,
      demoname: datas.demoname
    }
		WeaTools.callApi(URL, 'GET', param)
      .then(( data ) => {
        
      }).catch(() => {})

    window.open(row.url)
  }
  
  componentDidMount() {
    this.getDetail();
    this.setState({ demoid: this.getQueryVariable(window.location.href, 'id') })

    document.querySelector('#container').onscroll = (event) => {
      if (document.querySelector('#container').scrollTop > $('#container').height()) {
        this.setState({ isShowMoveUp: true })
      } else {
        this.setState({ isShowMoveUp: false })
      }
    }
  }

  getDetail() {
    const URL = '/plugin/demoDev/demoCenter/demoCenter_v1.jsp?operation=detail&tableid=2494&demoType=demo&id=' + this.getQueryVariable(window.location.href, 'id');
		WeaTools.callApi(URL, 'GET')
      .then(( {datas} ) => {
        console.log(datas)
        // datas.accountList.forEach((item) => {
        //   item.url = datas.demoaddress
        // })
        document.title = datas.demoname
        this.setState({ datas: datas, accountList: datas.accountList,isShowMore: datas.accountList.length > 3 ? true : false, accountListE10: datas.accountList_e10, isShowMore1: datas.accountList_e10.length > 3 ? true : false, ldms: datas.ldms })
        document.querySelector('#xrcontent').innerHTML = datas.ldms

        setTimeout(() => {
          $('#xrcontent *').css({maxWidth: '100%'})
          $('#xrcontent img').css({height: 'auto', cursor: 'zoom-in'})

          $('#xrcontent img').each((i,v) => {
            $(v).attr('data-imgsrc', $(v).attr('src'))
            $(v).attr('class', 'formImgPlay')
            $(v).click((event) => {
              viewer(event)
            })
          })
        })
      }).catch(() => {})
  }

  changeTab (v) {
    const { ldms } = this.state;
    this.setState({ selectedKey: v })
    setTimeout(() => {
      if (document.querySelector('#xrcontent')) document.querySelector('#xrcontent').innerHTML = ldms
    })
    setTimeout(() => {
      $('#xrcontent *').css({maxWidth: '100%'})
      $('#xrcontent img').css({height: 'auto', cursor: 'zoom-in'})

      $('#xrcontent img').each((i,v) => {
        $(v).attr('data-imgsrc', $(v).attr('src'))
        $(v).attr('class', 'formImgPlay')
        $(v).click((event) => {
          viewer(event)
        })
      })
    })
  }

  changeTab1 (v) {
    this.setState({ selectedKey1: v })
  }

  handleClick(e) {
    console.log('click ', e);
    this.setState({
      current: e.key,
      openKeys: e.keyPath.slice(1),
    });
  }
  onToggle(info) {
    this.setState({
      openKeys: info.open ? info.keyPath : info.keyPath.slice(1),
    });
  }

  openDoc (data) {
    openFullWindowHaveBar(`${data.docAddr}`)
  }

  getQueryVariable(url, variable){
    var query = url.split("?")[1];
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable) return pair[1]; // 没有花括号默认执行第一个js语句
    }
    return(false);
  }

  moveUp () {    
    $('#container').animate({
        scrollTop: 0,
    })
  }

  render() {
    const { selectMenu, keyword, current, openKeys, columns, columns1, accountList, accountListE10, topTab, topTab1, datas, selectedKey, selectedKey1, demoid, isShowMore, isShowMore1, isShowMoveUp } = this.state;
    const showData = isShowMore ? accountList.slice(0, 3) : accountList
    const showData1 = isShowMore1 ? accountListE10.slice(0, 3) : accountListE10
    const str = datas.ldms
    let showTab
    if(datas.e10demoaddress) showTab == '1'
    if(datas.demoaddress) showTab == '0'
    return (
      <div>
        <div className="demo-topbg" style={{ backgroundImage: 'url(' + require('../imgs/demodetailbg.png') + ')' }}>
          <div className="topbg-con">
            <p>{datas.demoname}</p>
            {/* <div>助力组织的数字化转型</div> onClick={() => window.open('/democenter/index.html?id=' + demoid)} */}
          </div>
        </div>
        <div className="demo-detail-main">
          <div className="content">
            <div className="fwxq">
              <div className="title">访问详情</div>
              <div className="ldms" style={{ marginTop: 0 }}>
                {
                  datas.demoaddress && datas.e10demoaddress ? <WeaTab
                    datas={topTab1}
                    keyParam="viewcondition" //主键
                    selectedKey={this.state.selectedKey1}
                    onChange={v => this.changeTab1(v) }
                  /> : ''
                }
              </div>
              {
                selectedKey1 == '0' ? <div>
                  <div className="lj">
                    {
                      datas.demoaddress ? <span>访问地址:</span> : ''
                    }
                    {
                      datas.demoaddress ? <a href={datas.demoaddress} target="_blank" >{datas.demoaddress}</a> : ''
                    }
                    {
                      datas.xzdz ? <span>下载地址:</span>: ''
                    }
                    {
                      datas.xzdz ? <a href={datas.xzdz} target="_blank">{datas.xzdz}</a>: ''
                    }
                    {
                      datas.tqm ? <span>提取码：{datas.tqm}</span>: ''
                    }
                  </div>
                  <Table columns={columns} dataSource={showData} pagination={false} bordered style={{ padding: '0 64px 0 15px' }}  />
                  {
                    isShowMore ? 
                      <div className="more" onClick={() => this.setState({ isShowMore: !isShowMore })}>
                        <span>显示更多</span>
                        <Icon type="double-right" />
                      </div>
                    : <div style={{ height: '20px' }}></div>
                  }
                </div> : <div>
                  <div className="lj">
                    {
                      datas.e10demoaddress ? <span>访问地址:</span> : ''
                    }
                    {
                      datas.e10demoaddress ? <a href={datas.e10demoaddress} target="_blank" >{datas.e10demoaddress}</a> : ''
                    }
                  </div>
                  <Table columns={columns1} dataSource={showData1} pagination={false} bordered style={{ padding: '0 64px 0 15px' }}  />
                  {
                    isShowMore1 ? 
                      <div className="more" onClick={() => this.setState({ isShowMore1: !isShowMore1 })}>
                        <span>显示更多</span>
                        <Icon type="double-right" />
                      </div>
                    : <div style={{ height: '20px' }}></div>
                  }
                </div>
              }
              
            </div>
            <div className="ldms">
              <WeaTab
                datas={topTab}
                keyParam="viewcondition" //主键
                selectedKey={this.state.selectedKey}
                onChange={v => this.changeTab(v) }
              />
              {
                selectedKey == 0 ? 
                  <div id="xrcontent"></div> : ''
              }
              {
                selectedKey == 1 ? 
                  <div style={{ padding: '10px 0 10px 10px'}}>
                    <iframe src={`/spa/cube/index.html#/main/cube/search?customid=3467&&hidetop=1&demoid=${demoid}`} marginheight="0" marginwidth="0" height="400px" frameborder="0" scrolling="no" width="100%" id="iframepage2" allowtransparency="true"></iframe>
                  </div>
                    : ''
              }
            </div>
          </div>
          <div className="xgwd">
            <div className="title">相关文档</div>
            <div id="smwd">
              {
                datas.doc.map((v) => (
                  <div onClick={ () => this.openDoc(v) }>
                  {
                    (v.docType == 2 ||  v.docType == 6) && <img src={require('../imgs/pdf.png')} />
                  }
                  {
                    (v.docType == 0 ||  v.docType == 7) && <img src={require('../imgs/word.png')} />
                  }
                  {
                    (v.docType == 3 ||  v.docType == 8) && <img src={require('../imgs/excel.png')} />
                  }
                  {
                    (v.docType == 1 || v.docType == 9)  && <img src={require('../imgs/ppt.png')} />
                  }
                    <div>{v.docName}</div>
                  </div>
                ))
              }
            </div>
          </div>
          {
            isShowMoveUp ? 
            <div className="moveup" onClick={() => this.moveUp()}>
              <img src={require('../imgs/moveup.png')} />
              <span>返回<br/>顶部</span>
            </div> : ''
          }
          
        </div>
      </div>
    )
  }
}

export default DemoDetail;